<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		.box{
			width: 800px;
			margin:auto;
		}
		.search{
			width: 500px;
			margin:auto;
		}
		input{
			width: 400px;
			height: 30px;
			float: left;
			border:1px solid #ff0000;
		}
		button{
			border:1px solid #ff0000;
			background-color: #ff0000;
			float: left;
			width:80px;
			height: 30px;
			color: white;
		}
		.nav{
			height: 30px;
			width: 100%;
			position: relative;
			z-index: 1;
			margin-bottom: 40px;
			background-color: #e3e4e5;
		}
		.nav ul{
			width:900px;
			margin:auto;
			padding-top:3px;
			list-style: none;	
			line-height: 25px;
			font-size: 12px;
			position: relative;
		}
		.nav>ul>li{
			padding-left: 10px;
			padding-right: 10px;
			line-height: 26px;
			color: #666;
			float: left;
			cursor: pointer;
		}
		.login{
			color: #c81623;
		}
		.dingwei{
			line-height: 25px;
			padding-right: 10px;
			border:1px solid #e3e4e5;
		}
		img{
			vertical-align: middle;
		}
		.dingwei img{
			width: 30px;
		}
		.city{
			width: 230px;
			background-color: #fff;
			border:1px solid #ccc;
			position: absolute;
			top: 29px;
			display: none;
			padding-bottom: 10px;
		}
		.beijing:hover .dingwei{
			height: 26px;
			position: relative;
			z-index: 2;
			background-color: #fff;
			border-color:#ccc;
			border-bottom: 0px;
		}
		.city ul{
			width:230px;
			overflow: hidden;
			margin-left: -30px;
		}
		.city li{
			margin-top: 5px;
			padding-left: 5px;
			padding-right: 5px;
			line-height: 20px;
			margin-left: 15px;
			float: left;
		}
		.city li:hover{
			background-color: #f4f4f4;
			color:red;
		}
		.first{
			background-color: red;
			color:#fff;
		}
		.red:hover{
			color: #c81623;
		}
		.beijing:hover .city{
			display: block;
		}
		.mine:hover .city{
			 display: block;
		}
	</style>
</head>
<body>
		<div class="nav">
			<ul>
				<li class="beijing">
					<div  class="dingwei"><img src="img/dingwei.png">北京</div>
					<div class="city">
						<ul>
							<li class="first">北京</li>
							<li>上海</li>
							<li>天津</li>
							<li>杭州</li>
							<li>北京</li>
							<li>江西</li>
							<li>衢州</li>
							<li>丽水</li>
							<li>义乌</li>
							<li>杭州</li>
							<li>北京</li>
							<li>江西</li>
							<li>衢州</li>
						</ul>
					</div>
				</li>
				<li class="red">你好，请登录</li>
				<li class="login">免费注册</li>
				<li class="red">我的订单</li>
				<li class="mine">我的京东<img src="img/kuohao.png"></li>
				<li class="red">京东会员</li>
				<li class="red">企业采购</li>
				<li>客户服务<img src="img/kuohao.png"></li>
				<li>网站导航<img src="img/kuohao.png"></li>
				<li>手机京东</li>
			</ul>
		</div>
		<div class="search">
			<input type="text" name="">
			<button>搜索</button>
		</div>
</body>
</html>